<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>QUARTZ</title>
    <link href="/quartz/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link href="/quartz/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .btnRun, .btnPause, .btnResume, .btnEdit {margin-right: 8px;}
        .input-group {margin-bottom: 5px;}
        .title {text-align:center; font-size:30px; margin-top:15px;}
        .btnCreate {text-align:right; margin:5px 15px;}
        .head {border:solid; border-color:#8080805c; border-width:1px;}
        .line {
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.23), rgba(0, 0, 0, 0));
        }

        .modal-label {
            width: 150px;
        }

        .modal-input {
            width: 418px !important;
        }
    </style>
</head>
<body>

<div class="container-fluid" style="padding-top: 15px;">

    <div class="head">
        <div class="title">QUARTZ 任务调度动态管理系统Web UI</div>
        <hr class="line">
        <div class="btnCreate">
            <button type="button" class="btn btn-primary" id="createBtn" data-toggle="modal">创建</button>
        </div>
    </div>

    <table class="table table-bordered">
        <thead>
        <tr class="active">
            <th>id</th>
            <th>任务名称</th>
            <th>分组</th>
            <th>Bean</th>
            <th>执行方法</th>
            <th>Cron表达式</th>
            <th>状态</th>
            <th>描述</th>
            <!-- <th>interface</th> -->
            <th style="text-align: center;">操作</th>
        </tr>
        </thead>
        <tbody>
        <!--#foreach($item in $jobs)-->
        <th:block th:each="item : ${jobs}">
        <tr th:data-id="${item.jobId}">
            <td th:text="${item.jobId}"></td>
            <td th:id="'name_' +${item.jobId}" th:text="${item.jobName}"></td>
            <td th:id="'group_' +${item.jobId}" th:text="${item.jobGroup}"></td>
            <td th:id="'bean_' +${item.jobId}" th:text="${item.beanName}"></td>
            <td th:id="'method_' +${item.jobId}" th:text="${item.methodName}"></td>
            <td th:id="'cron_' +${item.jobId}" th:text="${item.cronExpression}"></td>
            <td th:id="'status_' +${item.jobId}" th:text="${item.jobStatus}"></td>
            <td th:id="'desc_' +${item.jobId}" th:text="${item.description}"></td>
            <!-- <td>$!item.interfaceName</td> -->
            <td style="text-align: center;">
                <div class="btn-group text-center" role="group" th:data-id="${item.jobId}">
                    <button type="button" class="btn btn-default btnRun">执行一次</button>
                    <button type="button" class="btn btn-default btnPause">暂停</button>
                    <button type="button" class="btn btn-default btnResume">恢复</button>
                    <button type="button" class="btn btn-default btnEdit">编辑</button>
                    <button type="button" class="btn btn-warning btnDelete">删除</button>
                </div>
            </td>
        </tr>
        </th:block>
        <!--#end-->
        </tbody>
    </table>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <form id="mainForm" action="">
                    <div>
                        <input type="hidden" class="form-control" id="jobId" name="jobId" />
                        <div class="input-group">
                            <span class="input-group-addon modal-label">任务名称</span>
                            <input type="text" alias="no-edit" name="jobName" class="form-control modal-input" id="edit_name" />
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon modal-label">分组</span>
                            <input type="text" alias="no-edit" name="jobGroup" class="form-control modal-input" id="edit_group" />
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon modal-label">Bean</span>
                            <input type="text" alias="no-edit" name="beanName" class="form-control modal-input" id="edit_bean" />
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon modal-label">执行方法</span>
                            <input type="text" alias="no-edit" name="methodName" class="form-control modal-input" id="edit_method" />
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon modal-label">Cron表达式</span>
                            <input type="text" alias="no-edit" name="cronExpression" class="form-control modal-input" id="edit_cron" />
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon modal-label">任务状态</span>
                            <select id="edit_status" name="jobStatus" class="form-control modal-input" data-size="10">
                                <option value="NORMAL" selected="selected">正常</option>
                            </select>
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon modal-label">任务描述</span>
                            <input type="text" alias="no-edit" name="description" class="form-control modal-input" id="edit_desc" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/quartz/js/jquery.min.js"></script>
<script src="/quartz/js/bootstrap.min.js"></script>
<script src="/quartz/js/bootstrap-select.min.js"></script>
<script src="/quartz/js/index.js"></script>
</body>
</html>
